<template>
    <div>
        <el-row type="flex" class="fen">
            <el-col :span="4">
                <span class="title"></span>商品列表
            </el-col>
            <el-col :span="6" :offset="14">
                <i class="el-icon-refresh"></i><el-button size="small" @click="refresh">刷新</el-button>
                <el-button size="small"><i class="el-icon-arrow-left" @click="back"></i>返回</el-button>
            </el-col>
        </el-row>
<!--        <el-row class="xx">-->
<!--            <el-col :offset="2">-->
<!--                <el-button size="medium" @click="changeStatus(0)">全部订单</el-button>-->
<!--                <el-button size="medium" @click="changeStatus(2)">待付款</el-button>-->
<!--                <el-button size="medium" @click="changeStatus(6)">已完成</el-button>-->
<!--                <el-button size="medium" @click="changeStatus(10)">已取消</el-button>-->
<!--            </el-col>-->
<!--        </el-row>-->

        <el-row class="fen">
            <el-col :span="4">
                <i class="el-icon-search"></i>筛选查询
            </el-col>
<!--            <el-col :span="2" :offset="16">-->
<!--                <el-button size="small" @click="dialogFormVisible = true">高级检索</el-button>-->
<!--            </el-col>-->
        </el-row>
        <el-row class="inputGroup">
            <el-col :span="4">订单编号：<el-input class="search" size="small" v-model="orderData.orderNo" @blur="search" width="50px" placeholder="请输入内容" autocomplete="off"></el-input></el-col>
            <el-col :span="4" >用户账号：<el-input class="search" size="small" placeholder="请输入内容" v-model="orderData.userNumber" autocomplete="off" @blur="search"></el-input></el-col>
            <el-col :span="4">支付方式：<el-input class="search" size="small" placeholder="请输入内容"  v-model="orderData.orderPaymentChannel" autocomplete="off" @blur="search"></el-input></el-col>
            <el-col :span="6">提交时间：<el-date-picker type="datetime" class="search" size="small" v-model="orderData.createDate" placeholder="请选择时间" autocomplete="off" @blur="search"></el-date-picker></el-col>
            <el-col :span="4" >
                订单状态：
                <el-select v-model="orderData.orderStatus" @change="changeStatus">
                    <el-option key="0" label="全部订单" value="0"></el-option>
                    <el-option key="2" label="待付款" value="2"></el-option>
                    <el-option key="6" label="已完成" value="6"></el-option>
                    <el-option key="10" label="已取消" value="10"></el-option>
                </el-select>
            </el-col>
        </el-row>
        <el-row class="fen">
            <i class="el-icon-menu">数据列表</i>
        </el-row>
        <el-table
                :data="tableData"
                border
                style="width: 100%"
        >
            <el-table-column
                    prop="orderNo"
                    label="订单编号"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="createDate"
                    label="订单时间"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="priceTotal"
                    label="订单金额"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="userNumber"
                    label="用户账号">
            </el-table-column>
            <el-table-column
                    prop="orderPaymentChannel"
                    label="支付方式"
                    :formatter="paymentFormatter">
            </el-table-column>
            <el-table-column
                    prop="orderSource"
                    label="订单来源"
                    :formatter="sourceFormatter">
            </el-table-column>
            <el-table-column
                    prop="orderStatus"
                    label="订单状态"
                    :formatter="statusFormatter">
            </el-table-column>
            <el-table-column
                    prop="orderType"
                    label="类型"
                    :formatter="typeFormatter">
            </el-table-column>
            <el-table-column
                    label="操作"
                    width="100">
<!--                <template slot-scope="scope">-->
<!--                    <div @click="orderCourderLook(scope.row)" class="orderCourse_look">查看订单</div>-->
<!--                </template>-->
                    <template slot-scope="scope">
                        <router-link to="/detail"><el-button type="text" size="small" @click="check(scope.row)">查看订单</el-button></router-link>
                    </template>
            </el-table-column>
        </el-table>
        <div class="block" style="margin-top:15px;">
            <el-pagination align='center' @size-change="handleSizeChange" @current-change="handleCurrentChange"
                           :current-page="currentPage"
                           :page-sizes="[2,5,10,20]"
                           :page-size="pageSize"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="total">
            </el-pagination>
        </div>
        <el-dialog title="高级检索" :visible.sync="dialogFormVisible">
            <el-form :model="orderData">
                <el-form-item label="订单编号" :label-width="formLabelWidth">
                    <el-input v-model="orderData.orderNo" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="用户账号" :label-width="formLabelWidth">
                    <el-input v-model="orderData.userNumber"></el-input>
                </el-form-item>
                <el-form-item label="支付方式" :label-width="formLabelWidth">
                    <el-select v-model="orderData.orderPaymentChannel"></el-select>
                </el-form-item>
                <el-form-item label="订单来源" :label-width="formLabelWidth">
                    <el-select v-model="orderData.orderSource"></el-select>
                </el-form-item>
                <el-form-item label="订单状态" :label-width="formLabelWidth">
                    <el-select v-model="orderData.orderStatus"></el-select>
                </el-form-item>
                <el-form-item label="提交时间" :label-width="formLabelWidth">
                    <el-input v-model="orderData.createDate" width="50px"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="sure">确 定</el-button>
            </div>
        </el-dialog>
<!--        <transition name="el-fade-in-linear">-->
<!--            <div class="orderCourse_show" v-if="orderCourder_look">-->
<!--                <div class="orderCourse_show_top"><span class="orderCourse_show_top_left">订单详情</span><span class="orderCourse_show_top_back" @click="orderCourder_look = false">×</span></div>-->
<!--            </div>-->
<!--        </transition>-->


    </div>
</template>

<script>
    export default {
        inject:['reload'],
        name: "CourseOrderTable",
        data(){
            return{
                orderTableData:[],
                currentPage: 1, // 当前页码
                total: 3, // 总条数
                pageSize: 2,
                dialogFormVisible:false,
                orderData:{
                    orderNo:'',
                    orderPaymentChannel:'',
                    userNumber:'',
                    orderSource:'',
                    orderStatus:0,
                    createDate:'',
                },
                tableData:[],
                tableData2:[],
                formLabelWidth: '120px',
                orderCourder_look:false,
            }
        },
        watch: {
            orderData: {
                handler(newValue, oldValue){
                    if(newValue){
                        console.log("改变")
                    }
                },
                deep:true
            }
        },
        methods: {
            check(row){
                this.$store.commit("changeOrderNo", row.orderNo)
                this.$store.commit("changeOrderType", row.orderType)
            },
            sure(){
                this.getTableData(this.currentPage,this.pageSize,this.orderData.orderStatus);
            },
            search(){
                if(this.orderData.orderNo==null&&this.orderData.userNumber==null&&this.orderData.orderPaymentChannel==null&&this.orderData.createDate==null){
                    return;
                }else{
                    this.getTableData(this.currentPage,this.pageSize,this.orderData.orderStatus);
                }
                // this.tableData=this.tableData2;
                // this.total=this.tableData2.length;
            },
            changeStatus(status){
                this.getTableData(this.currentPage,this.pageSize,status)
                this.orderData.orderStatus=status;
            },
            refresh(){
                this.reload();
            },
            back(){
                this.$router.back()
            },
            typeFormatter(row){
                if(row.orderType==2){
                    return '视频';
                }
                if(row.orderType==3){
                    return '商品';
                }
            },
            sourceFormatter(row){
                if(row.orderSource==2){
                    return '小程序';
                }
                if(row.orderSource==3){
                    return 'APP';
                }
            },
            paymentFormatter(row){
                if(row.orderPaymentChannel==2){
                    return '微信支付';
                }
                if(row.orderPaymentChannel==3){
                    return '余额支付';
                }
            },
            statusFormatter(row){
                if(row.orderStatus==2){
                    return '待付款'
                }
                if(row.orderStatus==3){
                    return '已付款'
                }
                if(row.orderStatus==4){
                    return '待发货'
                }
                if(row.orderStatus==5){
                    return '已发货'
                }
                if(row.orderStatus==6){
                    return '已签收'
                }
                if(row.orderStatus==7){
                    return '退货申请'
                }
                if(row.orderStatus==8){
                    return '退货中'
                }
                if(row.orderStatus==9){
                    return '已退货'
                }
                if(row.orderStatus==10){
                    return '取消交易'
                }
            },
            //每页条数改变时触发 选择一页显示多少行
            handleSizeChange(val) {
                this.currentPage = 1;
                this.pageSize = val;
            },
            //当前页改变时触发 跳转其他页
            handleCurrentChange(val) {
                this.currentPage = val;
                this.getTableData(this.currentPage,this.pageSize,this.orderData.orderStatus)
            },
            getTableData(num,num1,num2){
                this.$http({method:'post',url:"/order/getCourseOrder",params:{page:num,limit:num1,orderStatus:num2},data:this.orderData}).then(res => {
                    this.orderTableData = res.data.data;
                    this.total=res.data.count;
                    this.tableData = this.orderTableData;
                })

            },
            orderCourderLook(row){
                // console.log(row)
                this.$http.get("/order/getDetail",{
                    params: {
                        orderNo: row.orderNo,
                        orderType: row.orderType
                    }
                }).then(res => {
                    console.log(res.data)
                })
                this.orderCourder_look = !this.orderCourder_look;
            }
        },
        created() {
            this.getTableData(this.currentPage,this.pageSize,0)
        },

    }
</script>

<style scoped>
    .el-input{
        width: 300px;
    }
    .el-select{
        width:128px
    }
    .search{
        width:130px ;
    }
    .fen{
        height: 50px;
        line-height: 50px;
        background-color: #F3F3F3;
    }
    .title{
        display: inline-block;
        width: 5px;
        height:10px;
        background-color: lightgreen;
    }
    .xx{
        background-color: #F9F9F9;
    }
    .orderCourse_look{
        margin: 0px 0px 0px 15px;
        font-size: 10px;
        color: blueviolet;
        cursor: pointer;
    }
    .orderCourse_show{
        background: #FFFFFF;
        width: 1350px;
        z-index: 5;
        top: 79px;
        left: 249px;
        height: 800px;
        position: absolute;
        box-shadow: 0px 4px 26px -8px;
    }
    .orderCourse_show_top{
        background-color: #F2F2F2;
        padding-top: 13px;
        height: 36px;
    }
    .orderCourse_show_top_left{
        margin: 0px 0px 0px 16px;
        color: black;
        font-weight: 700;
    }
    .orderCourse_show_top_back{
        margin: -13px 22px 0px 0px;
        float: right;
        font-size: 34px;
        cursor: pointer;
    }
</style>